<template>
	<view>
		<view class="head-user-box">
			<image class="user-bg" src="../../static/images/user-bg.png"></image>
			<view class="head-box flex flex-column align-center justify-center" @click="goLogin()">
				<image class="mb-3" :src="userInfo==''?'../../static/images/cdz-nav.png':userInfo.avatar"></image>
				<view>{{userInfo==''?'请登录':userInfo.nickname}}</view>
				<view v-if="userInfo!=''" style="font-size: 12px;line-height: 50rpx;">邀请码:{{userInfo.id}}</view>
			</view>
		</view>

		<view>
			<!-- <button type="default" @click="clearStorage">清除本地缓存</button> -->
			<view class="item-nav flex justify-between align-center" v-for="(item,index) in mynavList" :key="index"
				v-if="item.isType" @click="navgetTo(item.link)">
				<view class="left-box flex align-center">
					<image class="mr-3" :src="item.icon" mode="widthFix"></image>
					<view>{{item.name}}</view>
				</view>
				<image class="right-icon" src="../../static/images/right.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getServicePhone
	} from '@/api/user.js'
	export default {
		data() {
			return {
				userInfo: '',
				is_landlord: 0
			}
		},
		onShow() {
			if (uni.getStorageSync('uid')) {
				this.getInfo();
			}
		},
		computed: {
			mynavList() {

				let navArr = [{
						icon: "../../static/images/bzzx.png",
						name: "帮助中心",
						link: "/pages/user/helppage"
					},
					{
						icon: "../../static/images/kf.png",
						name: "客服",
						link: ""
					},
					{
						icon: "../../static/images/sz.png",
						name: "个人信息",
						link: "/pages/user/setUserinfo"
					},
					{
						icon: "../../static/images/bank.png",
						name: "银行卡",
						link: "/pages/user/bankCar"
					},
					{
						icon: "../../static/images/money.png",
						name: "钱包",
						link: "/pages/user/money"
					},
					{
						icon: "../../static/images/fd.png",
						name: "房东",
						link: "/pages/user/recharge-list"
					},
					{
						icon: "../../static/images/cdz-nav.png",
						name: "充电桩",
						link: "/pages/user/user-power"
					},
					{
						icon: "../../static/images/yj-nav.png",
						name: "查看预警设备",
						link: "/pages/user/yj-map"
					},
					{
						icon: "../../static/images/bdcdz.png",
						name: "布点充电桩",
						link: "/pages/user/bdcdz"
					},
					{
						icon: "../../static/images/azqd.png",
						name: "安装抢单",
						link: "/pages/user/install-order"
					},
					{
						icon: "../../static/images/gzsb.png",
						name: "故障上报",
						link: "/pages/user/fault"
					},
					{
						icon: "../../static/images/wxdd.png",
						name: "维修订单",
						link: "/pages/user/repair"
					},
					{
						icon: "../../static/images/wdfxm.png",
						name: "我的分享码",
						link: "/pages/user/share-code"
					},
					{
						icon: "../../static/images/dpgl.png",
						name: "店铺管理",
						link: "/pages/home/writeOff"
					},
					{
						icon: "../../static/images/wddd.png",
						name: "我的订单",
						link: "/pages/home/myOrder"
					},
					{
						icon: "../../static/images/gywm.png",
						name: "关于我们",
						link: "/pages/home/aboutUs"
					},
					{
						icon: "../../static/images/tcdl.png",
						name: "退出登录",
						link: "signOut"
					}
				]
				let {
					userInfo
				} = this;
				//权限判断
				console.log(userInfo);
				navArr.forEach(item => {
					if (item.name == '房东') {
						if (userInfo.is_landlord == 1) item.isType = true
					} else if (item.name == '充电桩' || item.name == '维修订单' || item.name == '安装抢单') {
						if (userInfo.is_master == 1) item.isType = true
					} else if (item.name == '查看预警设备') {
						if (userInfo.is_warn == 1) item.isType = true
					} else if (item.name == '布点充电桩' || item.name == '我的分享码') {
						if (userInfo.is_bazaar == 1) item.isType = true
					} else if (item.name == '店铺管理') {
						if (userInfo.shop_id != null&&userInfo.shop_id != undefined&&userInfo.shop_id != 0) item.isType = true
					}  else {
						item.isType = true
					}
				})

				return navArr
			},
		},
		methods: {
			async navgetTo(path) {
				let that = this;
				if (path != '') {
					if (path == "signOut") {
						uni.showModal({
							title: '提示',
							content: '确认要退出登录吗?',
							success: function(res) {
								if (res.confirm) {
									that.clearStorage()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						return;
					}
					if (!uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: "/pages/user/login",
							success() {
								uni.showToast({
									title: "请登录",
									icon: "none"
								})
							}
						})
						return
					}

					if (path == "/pages/user/yj-map") {
						uni.redirectTo({
							url: path
						})
						return
					}

					uni.navigateTo({
						url: path
					})
				} else {
					let res = await getServicePhone()
					if (res.data.code == 1) {
						uni.makePhoneCall({
							phoneNumber: res.data.data
						})
					}
				}
			},
			goLogin() {
				if (!this.userInfo.id) {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				}
			},
			getInfo() {
				var data = {
					uid: uni.getStorageSync('uid')
				}
				getUserInfo(data).then(res => {
					if (res.data.code == 1) {
						this.userInfo = res.data.data;
						//alert(JSON.stringify(res.data.data));
					
						uni.setStorageSync('userInfo', res.data.data);
						uni.setStorageSync('token', res.data.data.token);
					} else {
						wx.clearStorage()
					}
				})
			},

			//清除本地缓存
			clearStorage() {
				uni.clearStorage();
				this.userInfo = ''
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: rgb(245, 245, 245);
	}

	.head-user-box {
		width: 100%;
		height: 290rpx;
		position: relative;
	}

	.user-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.head-box {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.head-box image {
		width: 115rpx;
		height: 115rpx;
		border-radius: 50% !important;
	}

	.item-nav {
		padding: 25rpx 35rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid rgb(242, 242, 242);

	}

	.left-box {
		font-size: 28rpx;
	}

	.left-box image {
		width: 60rpx;
		height: 60rpx;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}
</style>
